<template>
  <div class="container">
    <div class="info">
      <el-avatar :src="avatar" :size="84"/>
      <el-button size="default" circle>
        <ant-CameraTwoTone/>
      </el-button>
      <el-text class="name">{{ name }}</el-text>
      <div class="tag">
        <el-row justify="space-between">
          <el-col :span="6">
            <el-icon size="large">
              <el-User/>
            </el-icon>
            <el-text>全栈工程师</el-text>
          </el-col>
          <el-col :span="6">
            <el-icon size="large">
              <el-House/>
            </el-icon>
            <el-text>架构-后端</el-text>
          </el-col>
          <el-col :span="6">
            <el-icon size="large">
              <el-Location/>
            </el-icon>
            <el-text>北京</el-text>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {useTokenStore} from "@/stores/useTokenStore.ts";
import {storeToRefs} from "pinia";


const {avatar, name} = storeToRefs(useTokenStore())
</script>

<style scoped lang="scss">
:deep(.el-text) {
  --el-text-color: $base-color-text-primary;
}

.container {
  .info {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 205px;
    background-color: $info-top-bg-color;
    text-align: center;

    //头像
    .el-avatar {
      margin-top: 24px;
    }

    //上传头像
    .el-button {
      position: relative;
      top: -25px;
      left: 30px;
    }

    .name {

      font-size: 16px;
      font-weight: bold;
    }

    .tag {
      margin: 10px 0;
      padding: 0;
      width: 300px;
      white-space: nowrap;

      :deep(.el-icon) {
        margin-right: 10px;
      }

      :deep(.el-text) {
        position: relative;
        top: -3px;
        font-size: 14px;
      }
    }

  }

}
</style>
